
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { Search, Check, Close } from "@element-plus/icons-vue";
import { usePublicStoreHook } from "@/store/modules/public";
import { useUserStore } from "@/store/modules/user";
import { fetchGetSocietyAppliesList } from '@/api/manage/checkCenter/society'
import { fetchPostSocietyApply } from '@/api/society/index'
import { filterDate } from '@/utils/format'
import { fetchGetSocietyInfo } from '@/api/society/index'

// 表单数据
let tableData = reactive([])
const total = ref<number>(0)// 列表总数
// 实际传递的条件
let listQuery = reactive({
  currentPage: 1,
  name: undefined, // 姓名
  gender: undefined, // 类型
  college: undefined, // 学院
  major: undefined, // 专业
  grade: undefined, // 年级
  pageSize: 10,
  applyType: 5,
  checkPerson: useUserStore().userInfo.id
})
// 显示在界面上的查询条件
const showQuery = reactive({
  currentPage: 1,
  name: undefined, // 名称
  gender: undefined, // 类型
  college: undefined, // 学院
  major: undefined, // 专业
  grade: undefined, // 年级
  pageSize: 10,
  applyType: 5,
  checkPerson: useUserStore().userInfo.id
})
// 查询
const handleSearch = () => {
  getPageList()
  getSocietyInfo()
}
onMounted(() => {
  getPageList()
  getSocietyInfo()
})

const tableLoading = ref(false)

// 获取列表
const getPageList = async () => {
  tableLoading.value = true
  listQuery = showQuery
  const res = await fetchGetSocietyAppliesList(listQuery)
  const { currentPage, data } = res.data
  listQuery.currentPage = showQuery.currentPage = currentPage
  total.value = res.data.total
  tableData = data
  tableLoading.value = false
}

let societyInfo = ref({
  planNumber: 0,
  nowNumber: 0,
})
// 获取社团信息
const getSocietyInfo = () => {
  const id = useUserStore().userInfo.society.split('-')[1]
  fetchGetSocietyInfo(id).then((res: { data: { planNumber: number; nowNumber: number; }; }) => {
    societyInfo.value = res.data
  })
}

const collegeList = ref([{
  id: '',
  name: ''
}])
collegeList.value = usePublicStoreHook().collegeList
const majorList = ref([{
  id: '',
  name: ''
}])
majorList.value = usePublicStoreHook().majorList
const gradeList = ref([{
  id: '',
  name: ''
}])
gradeList.value = usePublicStoreHook().gradeList

const applyTypeList = ref([
  {
    id: 5,
    name: '入社申请'
  },
  {
    id: 6,
    name: '退社申请'
  },
])

const checkApply = (val: boolean, row: { id: any; applyType: any; personId: any; }) => {
  const applyName = ref('')
  val == true ? applyName.value = '同意' : applyName.value = '拒绝'
  ElMessageBox.confirm(
    `确定${applyName.value}该申请吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      const applyData = ref({
        id: row.id,
        applyStatus: 1,
        applyType: row.applyType,
        personId: row.personId,
        society: useUserStore().userInfo.society.split('-')[1]
      })
      if (val) {
        applyData.value.applyStatus = 1
        fetchPostSocietyApply(applyData.value).then((res: { code: number; }) => {
          if (res.code == 200) {
            ElMessage({
              type: 'success',
              message: '审批成功，已同意',
            })
            setTimeout(() => {
              getPageList()
              getSocietyInfo()
            }, 100)
          }
        })

      } else {
        applyData.value.applyStatus = 2
        fetchPostSocietyApply(applyData.value).then((res: { code: number; }) => {
          if (res.code == 200) {
            ElMessage({
              type: 'success',
              message: '审批成功，已拒绝',
            })
            setTimeout(() => {
              getPageList()
              getSocietyInfo()
            }, 100)
          }
        })

      }
    })
    .catch(() => { })
}

</script>


<template>
  <div class="society-content">
    <div class="progress-box flex justify-around items-center">
      <div class="box-item">
        <span class="progress-name">计划招新人数：</span>
        <span class="progress-count">{{ societyInfo.planNumber }}</span>
      </div>
      <div class="box-item">
        <span class="progress-name">已招人数：</span>
        <span class="progress-count">{{ societyInfo.nowNumber }}</span>
      </div>
      <div class="box-item">
        <span class="progress-name">剩余可用名额：</span>
        <span class="progress-count">{{ societyInfo.planNumber - societyInfo.nowNumber }}</span>
      </div>
    </div>
    <!-- 查询 -->
    <div class="header flex flex-center">
      <el-select v-model="showQuery.applyType" class="m-2" placeholder="申请类型" clearable>
        <el-option v-for="item in applyTypeList" :key="item.id" :label="item.name" :value="item.id" clearable />
      </el-select>
      <el-input v-model="showQuery.name" placeholder="申请人" clearable />
      <el-select v-model="showQuery.college" class="m-2" placeholder="学院" clearable>
        <el-option v-for="item in collegeList" :key="item.id" :label="item.name" :value="item.id" clearable />
      </el-select>
      <el-select v-model="showQuery.major" class="m-2" placeholder="专业" clearable>
        <el-option v-for="item in majorList" :key="item.id" :label="item.name" :value="item.id" clearable />
      </el-select>
      <el-select v-model="showQuery.grade" class="m-2" placeholder="年级" clearable>
        <el-option v-for="item in gradeList" :key="item.id" :label="item.name" :value="item.id" clearable />
      </el-select>
      <el-button type="primary" @click="handleSearch" :icon="Search" class="btn-green">
        查询
      </el-button>
    </div>

    <!-- 表单 -->
    <el-table :data="tableData" stripe v-loading="tableLoading">
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="stuCode" label="申请类型" show-overflow-tooltip>
        <template #default="scope">
          <div class="check-wait">{{ scope.row.applyType == 5 ? '入社申请' : '退社申请' }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="申请人" show-overflow-tooltip>
        <template #default="scope">
          <div>{{ scope.row.User.name }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="学号" show-overflow-tooltip>
        <template #default="scope">
          <div>{{ scope.row.User.stuCode }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="申请时间">
        <template #default="scope">
          <div>{{ filterDate(scope.row.createdAt) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="申请状态">
        <template #default="scope">
          <div>
            <span v-if="scope.row.status == 0" class="check-wait">
              待审批
            </span>
            <span v-if="scope.row.status == 1" class="check-agree">
              已同意
            </span>
            <span v-if="scope.row.status == 2" class="check-refuse">
              已驳回
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="操作" width="250">
        <template #default="scope">
          <div class="theme-success" v-if="scope.row.status == 0">
            <el-button class="btn-green" :icon="Check" v-if="(societyInfo.planNumber - societyInfo.nowNumber) > 0"
              @click="checkApply(true, scope.row)">同意</el-button>
            <el-button :icon="Close" class="btn-red" @click="checkApply(false, scope.row)">拒绝</el-button>
          </div>
          <div v-else>
            <span>{{ '--' }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :total="total" v-model:page="listQuery.currentPage" v-model:limit="listQuery.pageSize" hide-on-single-page
      @pagination="getPageList" />
  </div>
</template>
<style lang="scss" scoped>
.society-content {
  min-height: 45rem;
  display: grid;
  grid-template-rows: 8rem 8rem auto;
  gap: 2rem;

  .progress-box {
    font-size: 3rem;
    font-weight: 700;
    border: 2px solid #eee;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    color: #fff;
    background: $liner-tgreen;

    .progress-name {}

    .box-item {
      margin-right: 2rem;
    }
  }

  .header {
    border: 2px solid #eee;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

    .el-input,
    .el-select {
      margin-right: 20px;
      width: 16%;
    }
  }
}
</style>

